



<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#FFF">
  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon.png">

<link rel="icon" type="image/ico" sizes="32x32" href="/blog/images/favicon.ico">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">


<link rel="alternate" type="application/rss+xml" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/rss.xml" />
<link rel="alternate" type="application/atom+xml" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/atom.xml" />
<link rel="alternate" type="application/json" title="宋胖子" href="https://song-ruipeng.gitee.io/blog/feed.json" />

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/blog/css/app.css?v=0.2.5">

  
  <meta name="keywords" content="少时诵诗书" />


<link rel="canonical" href="https://song-ruipeng.gitee.io/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/">



  <title>
自测1 - 我的日志 |
Yume Shoka = 宋胖子</title>
<meta name="generator" content="Hexo 6.3.0"></head>
<body itemscope itemtype="http://schema.org/WebPage">
  <div id="loading">
    <div class="cat">
      <div class="body"></div>
      <div class="head">
        <div class="face"></div>
      </div>
      <div class="foot">
        <div class="tummy-end"></div>
        <div class="bottom"></div>
        <div class="legs left"></div>
        <div class="legs right"></div>
      </div>
      <div class="paw">
        <div class="hands left"></div>
        <div class="hands right"></div>
      </div>
    </div>
  </div>
  <div id="container">
    <header id="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="inner">
        <div id="brand">
          <div class="pjax">
          
  <h1 itemprop="name headline">自测1
  </h1>
  
<div class="meta">
  <span class="item" title="创建时间：2023-07-25 09:31:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <span class="text">发表于</span>
    <time itemprop="dateCreated datePublished" datetime="2023-07-25T09:31:00+08:00">2023-07-25</time>
  </span>
</div>


          </div>
        </div>
        <nav id="nav">
  <div class="inner">
    <div class="toggle">
      <div class="lines" aria-label="切换导航栏">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
    </div>
    <ul class="menu">
      <li class="item title"><a href="/blog/" rel="start">Yume Shoka</a></li>
    </ul>
    <ul class="right">
      <li class="item theme">
        <i class="ic i-sun"></i>
      </li>
      <li class="item search">
        <i class="ic i-search"></i>
      </li>
    </ul>
  </div>
</nav>

      </div>
      <div id="imgs" class="pjax">
        <ul>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gipev1x5e4j20zk0m8b29.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclflwv2aj20zk0m84qp.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gicliierfjj20zk0m8npd.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giph4baakhj20zk0m8h5q.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1gicitspjpbj20zk0m81ky.jpg"></li>
          <li class="item" data-background-image=" https://cancan-wx.oss-cn-hangzhou.aliyuncs.com/bg/6833939bly1giclip4jbpj20zk0m87cv.jpg"></li>
        </ul>
      </div>
    </header>
    <div id="waves">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>
    <main>
      <div class="inner">
        <div id="main" class="pjax">
          
  <div class="article wrap">
    
<div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<i class="ic i-home"></i>
<span><a href="/blog/">首页</a></span><i class="ic i-angle-right"></i>
<span  class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" itemprop="item" rel="index" title="分类于 我的日志"><span itemprop="name">我的日志</span></a>
<meta itemprop="position" content="1" /></span>
</div>

    <article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN">
  <link itemprop="mainEntityOfPage" href="https://song-ruipeng.gitee.io/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/">

  <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="image" content="/blog/images/avatar.jpg">
    <meta itemprop="name" content="宋胖子">
    <meta itemprop="description" content=", 欢迎大家一起交流">
  </span>

  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="宋胖子">
  </span>

  <div class="body md" itemprop="articleBody">
    

    <h3 id="vue双向绑定原理关键点"><a class="markdownIt-Anchor" href="#vue双向绑定原理关键点">#</a> vue 双向绑定原理，关键点？</h3>
<p>1. 双向绑定就是 vue 中的 v-model，绑定后数据改变视图就会跟着改变，同样视图改变数据也会跟着变化。 <code>(响应是数据到视图)</code> <br>
 2.v-model 其实就是一个语法糖，是:value 和 @input 的结合，使用 v-model 可以减少大量繁琐的事件处理的代码。</p>
<h3 id="实现垂直居中的方式"><a class="markdownIt-Anchor" href="#实现垂直居中的方式">#</a> 实现垂直居中的方式？</h3>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">  <span class="selector-class">.parent</span>&#123;</span></span><br><span class="line"><span class="language-css">     <span class="attribute">display</span>:flex;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">justify-content</span>: center;</span></span><br><span class="line"><span class="language-css">      <span class="attribute">align-items</span>:center    </span></span><br><span class="line"><span class="language-css">  &#125;</span></span><br><span class="line"><span class="language-css">  <span class="selector-class">.parent1</span>&#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">position</span>:relative;</span></span><br><span class="line"><span class="language-css">  &#125;</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.son1</span>&#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">top</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">left</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>,-<span class="number">50%</span>);</span></span><br><span class="line"><span class="language-css">&#125;</span></span><br><span class="line"><span class="language-css"> <span class="selector-class">.parent2</span>&#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">position</span>:relative;</span></span><br><span class="line"><span class="language-css">  &#125;</span></span><br><span class="line"><span class="language-css">  <span class="selector-class">.son2</span>&#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">position</span>:absolute;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">top</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">left</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">right</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">bottom</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">margin</span>:auto;</span></span><br><span class="line"><span class="language-css">  &#125;</span></span><br><span class="line"><span class="language-css">  <span class="selector-class">.parent3</span>&#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">position</span>:relative;</span></span><br><span class="line"><span class="language-css">  &#125;</span></span><br><span class="line"><span class="language-css">  <span class="selector-class">.son3</span>&#123;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">position</span>:absolute;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">left</span>:<span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">right</span>:<span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">margin-left</span>:-<span class="number">50%</span>;</span></span><br><span class="line"><span class="language-css">  <span class="attribute">margin-top</span>:-<span class="number">50%</span></span></span><br><span class="line"><span class="language-css">  &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>3. 常用的伪元素有哪些？<br>
:after,:before,:hover<br>
4. 移动端如何适配？<br>
移动端可以通过 meta 标签中的 viewport 属性来适配不同屏幕尺寸，例如设置 width=device-width、initial-scale=1 等。<br>
1. 适配不同像素密度的屏幕:@media (媒体查询)<br>
 2. 尺寸不同:rem，vh，vw<br>
5. 本地存储有哪些？三者区别？<br>
sessionStorge，cookie，localStorge<br>
 <code>cookie：cookie是最早提出的存储方式，在此之前服务端无法判断网络中的两个请求是否是同一个用户发出的，这样cookie就出现了，cookie只有4kb是纯文本文件，每次http请求都会携带。可存储的数据有限，且依赖于服务器，无需请求的数据不要放在cookie中。</code> <br>
sessionStorge: 存储的数据保存在本地，数据保存在当前会话，刷新数据页面不会被清除，结束会话数据消失，同页面不同窗口数据不会共享，5MB<br>
localStorge: 数据保存在本地，数据不会被清除，除非手动清除，5MB。<br>
6.JS 判断类型，如何判断？<br>
基本数据类型:undifined，null，string，bolean，number，bigint，Symbol (es6)<br>
 引用类型:object (数组，函数，对象)</p>
<p><code>type of</code>  可以判断类型，但是数组，对象，null 都会判断为 object 对象<br>
对象可以用 <code>instance of</code>  判断对象类型，但是不能判断基础类型<br>
 <code>constructor</code>  可以判断，但是一个对象改变它的原型就无法判断<br>
 <code>Object.property.toString.call()</code>  也可以判断<br>
 7.ES6 新特性<br>
 1.async ，await<br>
2.Map,weakMap,Set,weakSet<br>
3.Promise<br>
4.class<br>
5.Symbol,Bigint<br>
6.proxy<br>
8.let const var<br>
 块级作用域:let const var（x）<br>
是否必须设置初始值:const let (x) var (x)<br>
 变量提升:const (x) let (x) var<br>
 添加全局属性:const (x) let (x) var<br>
 重复变量声明:const (x) let (x) var<br>
 暂时性死区:let const var（x）<br>
改变指针指向:const let (x) var (x)<br>
 9. 数组去重:<br>
set ,indexOf,slice<br>
10. 深拷贝，浅拷贝？？(待看)<br>
 11.vue 生命周期<br>
 beforeCreated (组件实例创建之初，初始化任务)，create（组件实例完全创建，访问获取接口数据），beforeMounted (挂载之前),mounted (完全挂载，dom 已经创建，访问 don 元素),beforeUpdate,updated,beforeDestory,Destoryed<br>
 创建前后，挂载前后，更新前后，销毁前后<br>
 activated，deactivated<br>
12. 组件通讯:<br>
 父传子 props ，子传父 emit，父调子方法 ref,vuex, 父传孙 provide，inject<br>
12.vuex<br>
store: 存储数据，存储状态<br>
 getter:store 的计算属性<br>
 mutation: 修改 store 中状态的唯一方法<br>
 action: 异步操作，通过调用 muation 更改 store 中的状态<br>
 moudle：拆分模块化<br>
 13.computed 和 watch<br>
1.computed 是根据组件改变数据计算后返回的派生值<br>
 2.watch 是监听数据，执行回调函数 (操作 dom，网络请求)<br>
 3. 缓存方面:computed 是支持缓存，只有数据发生变化时才会重新计算，其他是读取缓存的值。watch 不支持缓存。<br>
4. 异步:computed 不支持异步，watch 支持异步处理。<br>
5.return:computed 必须有 return 返回值，watch 不一定需要返回值。<br>
6.computed：第一次加载需要调用 computed 监听计算数据，但是 watch 第一次不需要调用 watch 可以 (immuate:true)<br>
 watch 可以设置 deep 属性，深度监听。<br>
computed 是多条数据影响一条数据，watch 是一条数据影响多条数据。<br>
14 节流，防抖，实现<br>
节流：多次触发，只调用其中一次 Button<br>
 防抖：多次触发，调用最后一次 input<br>
15.vue 的导航路由守卫有哪些？<br>
1. 全局前置守卫，2. 全局后置钩子，3. 路由独享守卫和组件内的守卫<br>
 16. 闭包<br>
能够读取外层函数内部变量的函数。<br>
优点：可以重复使用变量，避免变量污染。<br>
缺点：会引起内存泄漏<br>
内存泄漏：不会进行垃圾回收<br>
 v8 垃圾回收:js 运行时，需要分配空间来存储变量和值，当变量不在分使用时，空间就会被回收<br>
 js 中<br>
 i: 全局变量：页面卸载的时候被回收<br>
 ii：局部变量：函数执行结束的时候就会被回收<br>
但是闭包中的局部变量不会被释放。<br>
17.vue2 和 vue3<br>
1.vue2 用的是 options API 但是 vue3 用的是 compotision API<br>
2.vue2 劫持数据用的是 Object.defineProperty 而 vue3 用的是 Proxy<br>
3.vue2 只有一个根节点，vue3 可以有多个节点<br>
 4.vue3 优化了 diff 算法，虚拟 DOM 重写，自定义渲染器<br>
 5.Suspense（异步组件）v-if 和 v-for，teleport 传送门<br>
 18.vueapi<br>
v-once，v-model,v-show,v-if,v-for,v-on.v-bind<br>
19.v-if 和 v-show<br>
v-show 只是修改样式上的隐藏<br>
 v-if 是销毁对应的 DOM 元素<br>
 20.v-for 为啥需要 key?<br>
1.key 的左右是为了更高效的更新虚拟 dom 节点。<br>
2.vue 在 patch 的过程中’判断两个节点是否是相同节点 key 是一个必要条件，渲染一组列表时，key 往往是唯一标识。如果不定义 key，vue 会认为是同一个节点，低效，影响效率。<br>
3. 从源码知道，vue 判断两个节点是否相同主要是判断两者的元素和 key 等，如果不设置 key，值是 undefined，则可能是也相同节点，造成大量的 dom 更新。<br>
21.nextTick 的使用和原理<br>
 1. 等待下一次更新刷新的工具方法。<br>
2.vue 有个异步更新的机制，意思是如果数据发生变化，vue 不会立即更新 DOM，会开启一个队列，把组件更新函数保存在队列中，同一事件循环中发生的所有数据变更会异步批量处理。这个策略会导致我们的数据修改之后不会立即体现在 DOM 上，此时如果想要更新 DOM，就需要 nextTIck<br>
3. 源码:function nextTick（callback），我们传入的 callback 会放到队列刷新函数的后，所有调用 callback 的时候是已经刷新过的 dom。</p>

      <div class="tags">
          <a href="/blog/tags/%E5%B0%91%E6%97%B6%E8%AF%B5%E8%AF%97%E4%B9%A6/" rel="tag"><i class="ic i-tag"></i> 少时诵诗书</a>
      </div>
  </div>

   <footer>

    <div class="meta">
  <span class="item">
    <span class="icon">
      <i class="ic i-calendar-check"></i>
    </span>
    <span class="text">更新于</span>
    <time title="修改时间：2023-08-11 18:51:08" itemprop="dateModified" datetime="2023-08-11T18:51:08+08:00">2023-08-11</time>
  </span>
</div>

      
<div class="reward">
  <button><i class="ic i-heartbeat"></i> 赞赏</button>
  <p>请我喝[茶]~(￣▽￣)~*</p>
  <div id="qr">
      
      <div>
        <img data-src="/blog/images/wechatpay.png" alt="宋胖子 微信支付">
        <p>微信支付</p>
      </div>
      
      <div>
        <img data-src="/blog/images/alipay.png" alt="宋胖子 支付宝">
        <p>支付宝</p>
      </div>
      
      <div>
        <img data-src="/blog/images/paypal.png" alt="宋胖子 贝宝">
        <p>贝宝</p>
      </div>
  </div>
</div>

      

<div id="copyright">
<ul>
  <li class="author">
    <strong>本文作者： </strong>宋胖子 <i class="ic i-at"><em>@</em></i>宋胖子
  </li>
  <li class="link">
    <strong>本文链接：</strong>
    <a href="https://song-ruipeng.gitee.io/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" title="自测1">https://song-ruipeng.gitee.io/blog/2023/07/25/十一.自测1/</a>
  </li>
  <li class="license">
    <strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

  </footer>

</article>

  </div>
  

<div class="post-nav">
    <div class="item left">
      

  <a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" itemprop="url" rel="prev" data-background-image=" https:&#x2F;&#x2F;cancan-wx.oss-cn-hangzhou.aliyuncs.com&#x2F;bg&#x2F;6833939bly1giclize41wj20zk0m87gk.jpg" title="读《Vuejs设计与实现》总结">
  <span class="type">上一篇</span>
  <span class="category"><i class="ic i-flag"></i> 我的日志</span>
  <h3>读《Vuejs设计与实现》总结</h3>
  </a>

    </div>
    <div class="item right">
      

  <a href="/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/" itemprop="url" rel="next" data-background-image=" https:&#x2F;&#x2F;cancan-wx.oss-cn-hangzhou.aliyuncs.com&#x2F;bg&#x2F;6833939bly1giph47e9vtj20zk0m8x6l.jpg" title="React面试">
  <span class="type">下一篇</span>
  <span class="category"><i class="ic i-flag"></i> 我的日志</span>
  <h3>React面试</h3>
  </a>

    </div>
</div>

  
  <div class="wrap" id="comments"></div>


        </div>
        <div id="sidebar">
          

<div class="inner">

  <div class="panels">
    <div class="inner">
      <div class="contents panel pjax" data-title="文章目录">
          <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E5%85%B3%E9%94%AE%E7%82%B9"><span class="toc-number">1.</span> <span class="toc-text"> vue 双向绑定原理，关键点？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84%E6%96%B9%E5%BC%8F"><span class="toc-number">2.</span> <span class="toc-text"> 实现垂直居中的方式？</span></a></li></ol>
      </div>
      <div class="related panel pjax" data-title="系列文章">
        <ul>
          <li><a href="/blog/2022/08/20/%E4%B9%9D.Vue/" rel="bookmark" title="vue总结">vue总结</a></li><li><a href="/blog/2023/04/18/%E5%8D%81.HTTP/" rel="bookmark" title="HTTP总结">HTTP总结</a></li><li><a href="/blog/2023/04/18/%E4%B8%80.%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93/" rel="bookmark" title="计算机网络基础总结">计算机网络基础总结</a></li><li><a href="/blog/2023/04/21/%E4%BA%8C.Event%20Loop/" rel="bookmark" title="Event Loop">Event Loop</a></li><li><a href="/blog/2023/05/05/%E4%B8%89.Css/" rel="bookmark" title="CSS">CSS</a></li><li><a href="/blog/2023/05/17/%E5%9B%9B.JS/" rel="bookmark" title="JS">JS</a></li><li><a href="/blog/2023/06/12/%E4%BA%94.template/" rel="bookmark" title="Template">Template</a></li><li><a href="/blog/2023/07/03/%C2%A0%E5%85%AD.%E8%AF%BB%E6%BA%90%E7%A0%81%E7%90%86%E8%A7%A3Vnode/" rel="bookmark" title="读源码理解Vnode">读源码理解Vnode</a></li><li><a href="/blog/2023/07/18/%E4%B8%83.React/" rel="bookmark" title="React">React</a></li><li><a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" rel="bookmark" title="读《Vuejs设计与实现》总结">读《Vuejs设计与实现》总结</a></li><li><a href="/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/" rel="bookmark" title="React面试">React面试</a></li><li class="active"><a href="/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" rel="bookmark" title="自测1">自测1</a></li><li><a href="/blog/2023/08/15/%E5%8D%81%E4%BA%8C.Supense%E5%92%8C%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E8%A7%A3%E5%86%B3%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98/" rel="bookmark" title="Supense和异步组件解决首页白屏问题">Supense和异步组件解决首页白屏问题</a></li>
        </ul>
      </div>
      <div class="overview panel" data-title="站点概览">
        <div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <img class="image" itemprop="image" alt="宋胖子"
      data-src="/blog/images/avatar.jpg">
  <p class="name" itemprop="name">宋胖子</p>
  <div class="description" itemprop="description">欢迎大家一起交流</div>
</div>

<nav class="state">
    <div class="item posts">
      <a href="/blog/archives/">
        <span class="count">13</span>
        <span class="name">文章</span>
      </a>
    </div>
    <div class="item categories">
      <a href="/blog/categories/">
        <span class="count">1</span>
        <span class="name">分类</span>
      </a>
    </div>
    <div class="item tags">
      <a href="/blog/tags/">
        <span class="count">1</span>
        <span class="name">标签</span>
      </a>
    </div>
</nav>

<div class="social">
</div>

<ul class="menu">
  
    
  <li class="item">
    <a href="/blog/" rel="section"><i class="ic i-home"></i>首页</a>
  </li>


</ul>

      </div>
    </div>
  </div>

  <ul id="quick">
    <li class="prev pjax">
        <a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a>
    </li>
    <li class="up"><i class="ic i-arrow-up"></i></li>
    <li class="down"><i class="ic i-arrow-down"></i></li>
    <li class="next pjax">
        <a href="/blog/2023/07/25/%E4%B9%9D.React%E9%9D%A2%E8%AF%95/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a>
    </li>
    <li class="percent"></li>
  </ul>
</div>


        </div>
        <div class="dimmer"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="inner">
        <div class="widgets">
          
<div class="rpost pjax">
  <h2>随机文章</h2>
  <ul>
      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/06/12/%E4%BA%94.template/" title="Template">Template</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/21/%E4%BA%8C.Event%20Loop/" title="Event Loop">Event Loop</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/05/05/%E4%B8%89.Css/" title="CSS">CSS</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/05/17/%E5%9B%9B.JS/" title="JS">JS</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/08/15/%E5%8D%81%E4%BA%8C.Supense%E5%92%8C%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6%E8%A7%A3%E5%86%B3%E9%A6%96%E9%A1%B5%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98/" title="Supense和异步组件解决首页白屏问题">Supense和异步组件解决首页白屏问题</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/18/%E4%B8%80.%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93/" title="计算机网络基础总结">计算机网络基础总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/03/%C2%A0%E5%85%AD.%E8%AF%BB%E6%BA%90%E7%A0%81%E7%90%86%E8%A7%A3Vnode/" title="读源码理解Vnode">读源码理解Vnode</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/04/18/%E5%8D%81.HTTP/" title="HTTP总结">HTTP总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/20/%E5%85%AB.%E8%AF%BB%E3%80%8AVuejs%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0%E3%80%8B%E6%80%BB%E7%BB%93/" title="读《Vuejs设计与实现》总结">读《Vuejs设计与实现》总结</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/blog/categories/%E6%88%91%E7%9A%84%E6%97%A5%E5%BF%97/" title="分类于 我的日志">我的日志</a>
</div>

    <span><a href="/blog/2023/07/25/%E5%8D%81%E4%B8%80.%E8%87%AA%E6%B5%8B1/" title="自测1">自测1</a></span>
  </li>

  </ul>
</div>
<div>
  <h2>最新评论</h2>
  <ul class="leancloud-recent-comment"></ul>
</div>

        </div>
        <div class="status">
  <div class="copyright">
    
    &copy; 2010 – 
    <span itemprop="copyrightYear">2023</span>
    <span class="with-love">
      <i class="ic i-sakura rotate"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">宋胖子 @ Yume Shoka</span>
  </div>
  <div class="powered-by">
    基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span>
  </div>
</div>

      </div>
    </footer>
  </div>
<script data-config type="text/javascript">
  var LOCAL = {
    path: '2023/07/25/十一.自测1/',
    favicon: {
      show: "（●´3｀●）やれやれだぜ",
      hide: "(´Д｀)大変だ！"
    },
    search : {
      placeholder: "文章搜索",
      empty: "关于 「 ${query} 」，什么也没搜到",
      stats: "${time} ms 内找到 ${hits} 条结果"
    },
    valine: true,fancybox: true,
    copyright: '复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',
    ignores : [
      function(uri) {
        return uri.includes('#');
      },
      function(uri) {
        return new RegExp(LOCAL.path+"$").test(uri);
      }
    ]
  };
</script>

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

<script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script>

<script src="/blog/js/app.js?v=0.2.5"></script>




</body>
</html>
